<template>
  <div class="cell" :class="{'flex-column':isColumn}" @click.stop="clickHandle">
    <div v-if="label!==undefined" class="label">{{ label }}</div>
    <div class="value" :style="{fontWeight: weight}">
      <template v-if="custom || (value && `${value}`.length>0)">
        <slot>
          <div class="text" @click.stop="directionHandle">{{ value }}</div>
        </slot>
      </template>
      <div v-else class="text placeholder" :class="{'required':required}" @click.stop="directionHandle">{{ placeholder }}</div>
    </div>
    <template v-if="right">
      <slot name="right">
        <svg-icon class="icon" icon-class="xiangyou" @click.native.stop="directionHandle" />
      </slot>
    </template>
  </div>
</template>
<script>
export default {
  name: 'SettleCell',
  props: {
    label: {
      type: String,
      default: undefined
    },
    value: {
      type: [String, Number],
      default: ''
    },
    right: {
      type: Boolean,
      default: true
    },
    weight: {
      type: String,
      default: '400'
    },
    isColumn: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    placeholderColor: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    },
    custom: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  methods: {
    clickHandle() {
      this.$emit('click')
    },
    directionHandle() {
      this.$emit('right')
    }
  }
}
</script>
<style lang="less" scoped>
.cell{
  min-height: 26px;
  background-color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
  .label{
    line-height: 20px;
    font-size: 14px;
    color: #111111;
    font-weight: bold;
    margin-right: 30px;
    flex: 0 0 auto;
  }
  .value{
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 14px;
    color: #7D8091;
    text-align: right;
    .text{
      display: block;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
      &.placeholder{
        color: #A8B0C5;
      }
      &.required{
        color: #FF634C;
      }
    }
  }
  .icon{
    margin-left: 4px;
    flex: 0 0 16px;
    font-size: 16px;
    font-weight: bold;
    color: rgba(136, 136, 136, 1);
  }
  &.flex-column{
    display: block;
    position: relative;
    .label{
      margin-bottom: 10px;
    }
    .value{
      text-align: left;
      .text{
        text-align: left;
      }
    }
    .icon{
      position: absolute;
      right: 0;
      top: 2px;
    }
  }
}
.cell+.cell{
  margin-top:10px
}
</style>
